/**
 * Created by oiuyt on 2018/7/18.
 */
import React, { Component } from 'react';
import { Table, Button ,Pagination,Popconfirm,message} from 'antd';
import AuthorFormModal from './authorModal';
import axios from 'axios';
import qs from 'qs';
class authorList extends Component {
        //构造函数开始
        constructor(props) {
                super(props);
                this.state = {
                        list:[],
                        currentPage:1,
                        pageSize:20,
                        total:0,
                        pageSizeOptions:["20","30","50"],
                        viewStatus:false,
                        record:{
                                actionType:"add",
                                username:"",
                                id:"",
                                truename:"",
                                email:""
                        }
                };
        }
        //构造函数结束
        //初始化挂载
        componentDidMount() {
                //console.log("挂在的时候载入")
                this.getList(this.state.currentPage,this.state.pageSize)
        }
        getList = (current, pageSize) => {
                let that=this
                axios.post("/api/?s=Author.getList",qs.stringify({page:current, perpage:pageSize}))
                    .then(function (response) {
                            let result=response.data.data
                            that.setState(
                                {
                                        list:result.items,
                                        total:result.total
                                }
                            )
                    })
                    .catch(function (error) {
                            console.log(error);
                    })
        }

        onChange=(page, pageSize)=>
        {
                this.getList(page, pageSize)
        }

        onShowSizeChange=(current, pageSize)=>
        {
                this.getList(current, pageSize)
        }
        handleDelete = (id) => {
                console.log(id)
                let that=this
                axios.post("/api/?s=Author.delete",`id=${id}`)
                    .then(function (response) {
                            let result=response.data
                            if(result.ret===200)
                            {
                                    that.getList()
                                    message.success("删除成功！")
                            }
                            else
                            {
                                    message.error(result.msg)
                            }

                    })
                    .catch(function (error) {
                            console.log(error);
                    })
        }
       /*
        新增用户
        */
        handleAdd= () => {
                this.changeStatus()
                this.setState(
                    {
                            record:{
                                    actionType:"add",
                                    username:"",
                                    id:"",
                                    truename:"",
                                    email:""
                            }
                    });
        }
        handleModfiy= (record) => {
                this.setState(
                    { record: {
                                actionType:"mod",
                                username:record.username,
                                id:record.id,
                                truename:record.truename,
                                email:record.email
                        }
                    });
                this.changeStatus()
        }

        //父组件调用子组件的方法
        changeStatus=()=>{
        //调用组件进行通信
                let modalStatus=!this.state.viewStatus
                this.setState({ viewStatus:modalStatus});
        }


        render() {
                const columns = [
                        {
                        title: 'ID',
                        dataIndex: 'id',
                        key: 'id'
                }, {
                        title: '用户名',
                        dataIndex: 'username',
                        key: 'username'
                },
                        {
                        title: '邮箱',
                        dataIndex: 'email',
                        key: 'email',
                        render: (text, record) => (
                            <span>

                                    {record.email.split(" ").map((item,index) =>
                                        {
                                                return  item
                                        }
                                    )}
                                    </span>
                        ),
                },
                        {
                        title: 'Ip地址',
                        dataIndex: 'ip',
                        key: 'ip',
                        render: text => {return text},
                },
/*                        {
                                title: 'Ip地址',
                                dataIndex: 'ip',
                                key: 'ip',
                                render: text => {return this.formatView(text)},
                                //render: text => {return text},//写法一
                                //render: (text) => (<span>{text}</span>)//写法二
                        },*/
                        {
                                title: '登录次数',
                                dataIndex: 'num',
                                key: 'num'
                        },
                        {
                                title: '创建时间',
                                dataIndex: 'createdtime',
                                key: 'createdtime'
                        },                        {
                                title: '最近登录时间',
                                dataIndex: 'updatetime',
                                key: 'updatetime'
                        },
                        {
                        title: '操作',
                        dataIndex: 'operation',
                         fixed: 'right',
                         key: 'operation',
                         width: 100,
                        render: (text, record) => (
                                <span>
                                        <Popconfirm title="Sure to delete?" onConfirm={() => this.handleDelete(record.id)}>
                                                <a href="javascript:;">删除</a>
                                        </Popconfirm>
                                        &nbsp;
                                        <a href="javascript:;" onClick={() => this.handleModfiy(record)}>修改</a>
                                  </span>
                        ),
                }
                ];
                return (
                    <div>
                            <div className="table-operations">
                                    <Button onClick={this.handleAdd} type="primary">新增</Button>
                            </div>
                            <Table  scroll={{ x: 1800 }} columns={columns} dataSource={this.state.list} pagination={false} rowKey="id" />
                            <Pagination showSizeChanger onShowSizeChange={this.onShowSizeChange} defaultPageSize={this.state.pageSize} pageSizeOptions={this.state.pageSizeOptions} onChange={this.onChange} defaultCurrent={1} total={this.state.total} />
                            <AuthorFormModal record={this.state.record}  changeStatus={this.changeStatus} refresh={this.getList} viewModal={this.state.viewStatus}/>
                    </div>
                );
        }
}


export default authorList